<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js库/mock.js"></script>
    <script src="../../js库/vue.js"></script>
    <title>盒子模型练习2</title>
    <style>
        h1 {
            text-align: center;
            width: 300px;
            margin: 0 auto;
        }
        * {
            padding: 0; margin: 0;
        }
        div.box {
            width: 500px;
            height: 300px;
            /* background-color: palegreen; */
            margin: 0 auto;
            border: solid gray;
        }
        div.box>h3 {
            color: gray;
            font-style: normal;
           margin-top: 10px;
           padding: 20px;
           height:20px;
            line-height: 20px;
            /* background-color: pink; */
            border-bottom: dotted gray 1px;
          
        }
       ul {
        list-style: none;
        /* background-color: aqua; */
        padding-left: 20px;
        margin-top: 20px;
       }
       a {
        text-decoration: none;
        color: black;
       }
       li {
        margin: 10px;
        /* background-color: yellow; */
       }
    </style>
</head>

<body>
    <div id="root">
        <h1>快报</h1>
        <div class="box">
            <h3>品优购快报</h3>
            <ul>
                <li class="a"><a href="#"><span>【特惠】</span><span>二二个案v的</span></a></li>
                <li><span>【特惠】</span><span>二二个</span></li>
                <li><span>【特惠】</span><span>二二个案y7iys容忍他v的</span></li>
                <li><span>【特惠】</span><span>二二个fvbgrgsdf案v的</span></li>
                <li><span>【特惠】</span><span>二二个rgvbe案v的</span></li>
            </ul>
        </div>
        <h1>快报</h1>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
            }
        },
    })
</script>

</html>